<template>
	<view class="content">
		<view class='close' :style="{ paddingTop: statusBarHeight + 'px'}" >
			<up-icon name="close" color='#fff' size='24' @click="back"></up-icon>
		</view>
		<view class="avatar">
			<image src="/static/logo.png" mode="" style="width: 144rpx;height: 144rpx;"></image>
			<view class="p">先贤祠墓纪念堂</view>
		</view>
		<view class="form">
			<up-form labelPosition="left" ref="form1">
				<up-form-item borderBottom>
					<image src="http://112.124.50.179:8888/imgs/login/user.png" mode="widthFix" class="input_img"></image>
					<up-input v-model="formData.phoneNumber" fontSize='36rpx' placeholderClass='plClass' border="none"
						placeholder="请输入您的手机号" color='#fff' maxlength="11"></up-input>
				</up-form-item>
				<up-form-item borderBottom>
					<image src="http://112.124.50.179:8888/imgs/login/aq.png" mode="widthFix" class="input_img"></image>
					<up-input v-model="formData.verificationCode" fontSize='36rpx' placeholderClass='plClass'
						border="none" placeholder="输入验证码" color='#fff'></up-input>
					<u-code unique-key="B" class='get_code' ref="uCodeRef" @change="codeChange" start-text="获取验证码">
					</u-code>
					<text @tap="getCode" :text="tips" class="get_code">{{tips}}</text>
				</up-form-item>
				<up-form-item borderBottom>
					<image src="http://112.124.50.179:8888/imgs/login/lock.png" mode="widthFix" class="input_img"></image>
					<up-input v-model="formData.newPassword" fontSize='36rpx' type='password' placeholderClass='plClass'
						border="none" placeholder="输入新密码" color='#fff'></up-input>
				</up-form-item>
			</up-form>
			<view class="xieyi">

			</view>
			<view class="btn">
				<up-button :disabled="!isDisabled" @click="submit" color="rgba(243, 224, 187, 1)" shape="circle">
					<text>提交</text>
				</up-button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		reactive
	} from "vue"
	import {
		changepassword,
		getCodeApi
	} from "@/API/login/login.js"
	import Md5 from 'js-md5'
	const statusBarHeight = getApp().globalData.statusBarHeight;
	
	let flag = ref(false)
	const formData = reactive({
		phoneNumber: '',
		verificationCode: '',
		newPassword: '',
	})
	const isDisabled = computed(() => {
		if (formData.phoneNumber && formData.verificationCode && formData.newPassword) {
			return true
		} else {
			return false
		}
	})
	const submit = (async () => {
		if (!validateData()) {
			return
		}
		let obj = JSON.parse(JSON.stringify(formData))
		obj.newPassword = Md5(obj.newPassword)
		let rst = await changepassword(obj)
		if (rst.data.code == 0) {
			uni.showToast({
				title: rst.data.msg,
				icon: 'success',
				duration: 1000,
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}, 1000)
		} else {
			uni.showToast({
				title: rst.data.msg,
				icon: 'none',
				duration: 1000,
			});
		}
	})
	const goUrl = ((url) => {
		uni.navigateTo({
			url: url
		})
	})
	const back = (() => {
		uni.navigateBack({
			delta: 1
		})
	})
	const tips = ref('');
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		tips.value = text;
	};

	/**
	 * 校验数据
	 */
	const validateData = () => {
		if (formData.phoneNumber === '') {
			uni.showToast({
				title: '请输入手机号！',
				icon: 'none',
				duration: 2000
			})
			return false
		} else if (formData.phoneNumber.length != 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none',
				duration: 1000
			});
			return
		} else if (formData.verificationCode === '') {
			uni.showToast({
				title: '请输入验证码！',
				icon: 'none',
				duration: 2000
			})
			return false
		} else if (formData.newPassword === '') {
			uni.showToast({
				title: '请输入密码！',
				icon: 'none',
				duration: 2000
			})
			return false
		}
		return true
	}

	// 发送验证码
	const getCode = () => {
		// console.log(formData)
		if (formData.phoneNumber.length != 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none',
				duration: 1000
			});
			return
		}
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			// console.log(formData.phoneNumber)
			setTimeout(async () => {
				uni.hideLoading();
				let rst = await getCodeApi({
					phoneNumber: formData.phoneNumber,
					smsType: '3'
				})
				if (rst.data.code == 0) {
					// 这里此提示会被start()方法中的提示覆盖
					uni.showToast({
						title: rst.data.msg,
						icon: 'success',
						duration: 1000,
					});
					// 通知验证码组件内部开始倒计时
					uCodeRef.value.start();
				} else {
					uni.showToast({
						title: rst.data.msg,
						icon: 'none',
						duration: 1000,
					});
				}
			}, 2000);
		} else {
			uni.showToast({
				title: '倒计时结束后再发送',
				icon: 'error',
				duration: 1000
			});
		}
	};
</script>

<style lang="less">
	page {
		background: url('http://112.124.50.179:8888/imgs/login/bg.png') no-repeat;
		background-size: cover;
		background-position: 100%;
	}

	.content {
		.close {
			padding: 32rpx 0;
		}

		.avatar {
			display: flex;
			align-items: center;
			color: #fff;
			flex-direction: column;
			font-size: 40rpx;
			padding-top: 64rpx;

			.p {
				padding-top: 40rpx;
				font-weight: bold;
			}
		}

		.form {
			padding: 120rpx 48rpx 0 48rpx;

			.input_img {
				width: 48rpx;
				margin-right: 32rpx;
			}

			.get_code {
				color: #F3E0BB;
				font-size: 28rpx;
			}

			.xieyi {


				view {
					display: flex;
					align-items: center;

					image {
						position: relative;
						top: 1px;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.check {
					padding-right: 8rpx;
				}

				padding: 50rpx 0 40rpx 0;
				color: #999999;
				font-size: 24rpx;

				text {
					color: #fff;
				}
			}

			.btn {

				text {
					color: black;
					font-size: 36rpx;
					font-weight: Medium;
					font-family: PingFang SC-Medium;
				}
			}

		}


	}

	/deep/.u-form-item__body {
		border-bottom: 1px solid #C5C5C5 !important;
		padding: 16px 0 !important;
	}

	.u-button {
		height: 88rpx !important;
	}

	.plClass {
		font-size: 32rpx;
		color: #C5C5C5 !important;
	}
</style>